<template>
  <div class="common-layout" id="div">
    <el-container>
      <el-header>
        <home-find></home-find>
        <div class="headdiv">
          <el-carousel :height="bannerHeight+'px'" loop>
            <el-carousel-item v-for="item in imgList" :key="item.id">
              <img :src="item.idView" class="image"/>
            </el-carousel-item>
          </el-carousel>
          <el-row :gutter="15" >
            <el-col :span="12" >
                <my-inquiry></my-inquiry>
            </el-col>
            <el-col :span="12">
                <my-attention></my-attention>
            </el-col>
          </el-row>
        </div>
        <div class="jbbkdiv">
          <h3>疾病百科</h3>
          <home-disease ></home-disease>
          <div class="mk">
            <span class="h">热门医生</span>
            <home-doctor ></home-doctor>
          </div>
        </div>
        <div class="wzdiv">
          <div class="mk">
            <span class="h1">周边医院</span>
            <el-row :gutter="15">
              <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
          </div>
          <span class="h1">症状自查</span>
          <home-symptom></home-symptom>
        </div>
      </el-header>

      <el-main>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import HomeFind from "./childComps/homeSelect/HomeFind";
import MyInquiry from "./childComps/homeInquiry/MyInquiry";
import MyAttention from "./childComps/homeAttention/MyAttention";
import HomeDisease from "./childComps/homeDisease/HomeDisease";
import HomeDoctor from "./childComps/HomeDoctor/HomeDoctor";
import HomeSymptom from "./childComps/HomeSymptom/HomeSymptom";


export default {
    name:"Home",
    components:{
      HomeFind,
      MyInquiry,
      MyAttention,
      HomeDisease,
      HomeDoctor,
      HomeSymptom
    }
    ,
    data() {
        return {
          imgList: [
            {id:0,idView:require('../../assets/img/homeInquiry/zmd1.jpg')},
            {id:1,idView:require('../../assets/img/homeInquiry/zmd2.jpg')},
            {id:2,idView:require('../../assets/img/homeInquiry/zmd3.jpg')}
          ],
          // 图片父容器高度
          bannerHeight: 1000,
          // 浏览器宽度
          screenWidth: 0
        }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
// 首次加载时,需要调用一次
      this.screenWidth = window.innerWidth
      this.setSize()
      // 窗口大小发生改变时,调用一次
      window.onresize = () => {
        this.screenWidth = window.innerWidth
        this.setSize()
      }
    },
    computed: {
      noMore () {
        return this.count >= 22
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    methods: {

      setSize: function () {
        // 通过浏览器宽度(图片宽度)计算高度
        this.bannerHeight = 600 / 1550 * this.screenWidth
      }
    }
}

</script>

<style scoped>
#div{
  position: relative;
  z-index: -1;
}
#elrow1{
  margin-top: 15px;
}
.el-header, .el-footer {
  text-align: center;
  line-height: 60px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.image{
  width: 100%;
  height: inherit;
}
.el-row {
  margin-top: 20px;

}
.el-col {
  border-radius: 4px;
}
.h{
  size: 14px;
  font-weight: bolder;
  margin-right: 58%;
}
.h1{
  size: 14px;
  font-weight: bolder;
  margin-left: -79%;
}
.mk{
  margin-top: 18px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.jbbkdiv{
  margin-top: -5px;
  padding-top: 10px;
}
.el-icon-arrow-left:before {
  content: "1"!important;
}
</style>